{% extends 'layout.html' %}
{% block content %}
     <div class="container">
        <div style="float: right" class="col-lg-4">
            <form method="get">
                <div class="input-group">
              <input type="text" name='q' class="form-control" placeholder="Search for..."value="{{ search_data }}">
              <span class="input-group-btn">
                <button class="btn btn-default" type="submit">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
             </span>
            </div><!-- /input-group -->
            </form>
        </div><!-- /.col-lg-6 -->
        <div style="margin-bottom: 10px">
            <input id="btnAdd" type="button" value="新建订单" class="btn btn-primary" >
        </div>
         <div class="panel panel-default">
             <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"> </span>
                商品列表
            </div>
      <!-- Table -->
      <table class="table table-bordered" >
        <thead>
          <tr>

              {% for item in form %}
                  <th>{{ item.label }}</th>
              {% endfor %}
                <th>管理员</th>
                <th>操作</th>
          </tr>

        </thead>
        <tbody>
            {% for obj in page_queryset %}
          <tr>
            <td>{{ obj.oid }}</td>
            <td>{{ obj.title }}</td>
            <td>{{ obj.price }}</td>
            <td>{{ obj.get_status_display }}</td>
            <td>{{ obj.admin }}</td>
          <td>

                <input uid="{{ obj.id }}" class="btn btn-primary btn-xs btn-edit" style="width: 35px" type="button " value="编辑">
                <input uid="{{ obj.id }}" class="btn btn-danger btn-xs btn-delete" style="width: 35px" type="button " value="删除">
            </td>
          </tr>
        {% endfor %}
        </tbody>

      </table>

        </div>
        <div class="clearfix">

          <span style="color: green">已支付金额：{{ payList }}</span>
          <span style="color: red">未支付金额：{{ No_payList }}</span>
          <span style="color: blue">总金额：{{ sumpiceList }}</span>
          <span></span>
        </div>
         <div class="clearfix">
             <ul class="pagination" style="float: left">
                {{ page_string }}

                <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
            </ul>
         </div>
        <div style="margin-bottom: 10px" class="clearfix">
{#        新建/编辑订单对话框#}
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></button>
                        <h4 class="modal-title" id="myModalLabel">新建</h4>
                    </div>
              <div class="modal-body">
                <form  id="addForm" >
                    <div class="clearfix">
                     {% for item in form %}
                         <div class="col-xs-6">
                          <div class="form-group"style="position: relative;margin-bottom:20px ">
                            <label>{{ item.label }} </label>
                              {{ item }}
                              <span class="error-msg" style="color: red;position: absolute"></span>
                        </div>
                          </div>
                        {% endfor %}
                    </div>

                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button>
                <button type="button" id="btnSave" class="btn btn-primary " >保 存</button>
              </div>
            </div>
            </div>
        </div>
{#        新建删除的对话框#}
        <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">

{#                警告框#}
              <div class="alert alert-danger alert-dismissible fade in" role="alert">

                  <h4>删 除</h4>
                  <p>是否要删除</p>
                  <p style="text-align: right">
                    <button  id="btnConfirmDelete" type="button" class="btn btn-danger ">确 定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button>

                  </p>
            </div>
            </div>

    </div>
     </div>
     </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        //删除的全变量
        var delete_id;
        var edit_id;
        $(function (){
            bindBtnAddEvent();
            bindBtnSaveEvent();
            bindBtnDeleteEvent();
            bindBtnConfirmDelete();
            bindBtnEditEvent();
        });
        function bindBtnAddEvent(){
            $("#btnAdd").click(function (){
                //清空对话框数据
                $("#addForm")[0].reset();
                edit_id=undefined
                $("#myModalLabel").text("新建订单");
                $("#myModal").modal('show');
                $.ajax({
                　　　　　　url: '/order/add/',
                　　　　　　type: 'GET',
                　　　　　　dataType:'JSON',
                　　　　　　success: function(res){
                　　　　　　　　　　if(res.status){
               　　　　　　　　        $("#id_oid").val(res.data)
                　　　　　　　　　　　　}
                　　　　　　　　}
　　　　})
            });
        };
        function bindBtnSaveEvent(){
            $("#btnSave").click(function (){
                //清除所有错误信息
                $(".error-msg").empty();
                if(edit_id){
                    //编辑
                    doEdit();
                }else {
                    //新建
                    doAdd();
                }

            });

        };
        function doAdd(){
            $.ajax({
                            url:'/order/add/',
                            type:'post',
                            data:$("#addForm").serialize(),
                            dataType:'JSON',
                            success:function(res){
                                if(res.status){
                                    alert("添加成功")
                                    {#清空表单#}
                                    $("#addForm")[0].reset();
                                    {#关闭窗口#}
                                    $('#myModal').modal('hide');
                                    //刷新页面
                                    location.reload();
                                }else {
                                    $.each(
                                        res.error,function (name,date){
                                            console.log(name,date);
                                            $("#id_"+name).next().text(date[0])
                                        }
                                    )
                                }

                            }
                        });
        }
        function doEdit(){
             $.ajax({
                            url:'/order/editDetailed/'+'?uid='+edit_id,
                            type:'post',
                            data:$("#addForm").serialize(),
                            dataType:'JSON',
                            success:function(res){
                                if(res.status){
                                    {#清空表单#}
                                    $("#addForm")[0].reset();
                                    {#关闭窗口#}
                                    $('#myModal').modal('hide');
                                    //刷新页面
                                    location.reload();
                                }else {
                                    if(res.tips){
                                        alert(res.tips)
                                    }else {
                                        $.each(
                                        res.error,function (name,date){
                                            console.log(name,date);
                                            $("#id_"+name).next().text(date[0])
                                        }
                                    )
                                    }

                                }

                            }
                        });
        }
        function bindBtnDeleteEvent(){
            $(".btn-delete").click(
                function (){
                    $("#deleteModal").modal('show');
                    //获取删除行的id给全局变量
                    delete_id=$(this).attr("uid");
                    console.log(delete_id);
                }
            )
        };
        function bindBtnConfirmDelete(){
            $("#btnConfirmDelete").click(function (){
                //把全局变量的id 发送给后台

                $.ajax({
                    url:"/order/delete/",
                    type:"get",
                    data:{
                        id:delete_id
                    },
                    dataType:"JSON",

                    success:function (res){
                        if(res.status){
                            alert("删除成功")


                        //刷新页面
                            location.reload();
                        }else {
                            alert(res.error)
                        }

                    }
                })
            })
        };
        function bindBtnEditEvent(){
            $(".btn-edit").click(function (){
                //清空对话框数据
                $("#addForm")[0].reset();
                //把id赋值给获取全局变量
                edit_id=$(this).attr("uid");

                //ajax 发送数据到后台，获取相关数据传到前台
                $.ajax({
                    url:"/order/edit/",
                    data:{
                        id:edit_id,
                    },
                    type:"get",
                    dataType:"JSON",
                    success:function (res){
                        if(res.status){
                            //把后台传过来的值给标签
                            $.each(res.data,function (name,value){
                                $("#id_"+name).val(value);
                            })
                            //修改新建模态框为编辑字符
                            $("#myModalLabel").text("编辑订单")
                            //打开对话框公用新建模态框
                            $("#myModal").modal('show');
                        }else {
                            alert(res.error)
                        }

                    }
                })
            })
        };
    </script>
{% endblock %}